<template>
  <div class="upload-container">
    <a-button :style="{background:color,borderColor:color}"  size="small" type="primary" @click=" dialogVisible=true">
      上传图片
    </a-button>
    <a-modal v-model="dialogVisible" :footer="null">
      <a-upload  listType="picture-card" class="editor-slide-upload"
                 :show-file-list="true" :multiple="true"
                 :fileList="fileList"
                 :action="uploadAction"  @change="handleChange">
        <a-icon type="plus" />
        <div class="ant-upload-text">Upload</div>
      </a-upload>
      <a-button @click="dialogVisible = false">取 消</a-button>
      <a-button type="primary" @click="handleSubmit">确 定</a-button>
    </a-modal>
  </div>
</template>

<script>
// import { getToken } from 'api/qiniu'

export default {
  name: 'EditorSlideUpload',
  props: {
    color: {
      type: String,
      default: '#1890ff'
    }
  },
  data() {
    return {
      dialogVisible: false,
      listObj: {},
      fileList: [],
      uploadAction:this.UPLOAD_URL,
      previewVisible: false,
      previewImage: '',
    }
  },
  methods: {
    checkAllSuccess() {
      return Object.keys(this.listObj).every(item => this.listObj[item].hasSuccess)
    },
    handleSubmit() {
      const arr = Object.keys(this.listObj).map(v => this.listObj[v])
      if (!this.checkAllSuccess()) {
        this.$warning({title:'请等待所有图片上传成功 或 出现了网络问题，请刷新页面重新上传！'})
        return
      }
      this.$emit('successCBK', arr)
      this.listObj = {}
      this.fileList = []
      this.dialogVisible = false
    },
      async handleChange ({ file,fileList }) {
        console.log("upload==>",file,fileList)
          this.loading = true
          const isJPG = file.type === 'image/jpeg';
          const isPNG = file.type === 'image/png';
          const isGif = file.type === 'image/gif';
          if (!isJPG && !isPNG && !isGif) {
              this.$message.error('图片格式错误,请检查后重新上传!');
              this.loading = false;
              return;
          }
          const isLt500KB = file.size / 1024 / 500
          if (!isLt500KB) {
              this.$message.error('图片大小不合适,请上传小于500KB的图片!');
              this.loading = false;
              return;
          }
          this.listObj[file.uid] = {hasSuccess: false, uid: file.uid}

          this.fileList = fileList;
          // 根据服务端返回数据筛选上传成功的文件
          let i ;
          fileList.forEach((file) => {
              if (file.response) {
                  const uid = file.uid
                  if(file.status == "done"){
                      for(i in this.listObj){
                          if (this.listObj[i].uid === uid) {
                              this.listObj[i].url = file.response.data
                              this.listObj[i].hasSuccess = true
                              return
                          }
                      }
                  }
                  if(file.status == "removed"){
                      for(i in this.listObj){
                          if (this.listObj[i].uid === uid) {
                              delete this.listObj[i]
                              return
                          }
                      }
                  }
              }
          });
          console.log("-------------->",this.listObj)
          this.loading = false;
      },
  }
}
</script>
